<template>
  <div id="container">
    主页home的组件
    <hr />
    <my-cover v-model="url1"></my-cover>
    <hr />
    <!-- <my-cover v-model="url2"></my-cover> -->
    <span @click="handleclick"> 我的名字是{{ name }}</span>
    <div ref="mydiv">路由跳转的三种写法,都有了</div>
    <button @click="$router.push('/users')">跳转到个人信息页面-根据path</button>
    <hr />
    <button @click="$router.push('articles')">跳转到文章页面-根据name</button>
    <hr />
    <button @click="$router.push({ name: 'fans' })">
      跳转到粉丝页面-根据name对象
    </button>
    <hr />
    <button id="firstBtn" @click="testClick" ref="aa">{{ name }}</button>
  </div>
</template>

<script>
import f from '../../modules/b'

// 这里使用的就是默认导出的方式,这个整个导出的就是一个对象,这样
// 就可以直接用一个带名称把它们整个的导入到目标中,这里就是导入到了
// index.js中,在路由加载哪里就有,最后一行有一个路由懒加载的地方,
// 就是使用import给他们引入过来
import myCover from '@/components/myCover.vue'
import img from '../../assets/小孩.jpg'
export default {
  name: 'home',
  data () {
    return {
      // url1: 'http://toutiao-img.itheima.net/FiVm9yXQ44TrfdIWqnYVoSWqI7D4'
      url1: img,
      name: '顿健康'
    }
  },
  components: {
    myCover
  },
  created () {
    // console.log(f)
    f.f()
  },
  methods: {
    handleclick () {
      console.log('123')
      this.$refs.mydiv.style.backgroundColor = 'red'
      this.$refs.mydiv.style.color = 'white'
    },
    testClick () {
      this.name = '我改名字了:大佬'
      // 如果不使用nexttick,打印出来的还是原始值
      this.$nextTick(() => {
        console.log(this.$refs.aa.innerText)
      })
    }
  }
}
</script>

<style scoped lang="less">
#container {
  line-height: 30px;
}
</style>
